import * as React from "react";
import { Image} from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//引入页面
import Index from "../Views/index";
import My from '../Views/my';
import Type from '../Views/Type';


const Tab = createBottomTabNavigator();
class FoodNavigation extends React.Component{
  render(){
    return(
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;
              if (route.name === '首页') {
                iconName = focused
                  ? (<Image source={require('../img/index1.png')} style={{width:25,height:25}}/>)
                  : (<Image source={require('../img/index2.png')} style={{width:25,height:25}}/>);
              } else if (route.name === '类别') {
                iconName = focused
                  ? (<Image source={require('../img/type1.png')} style={{width:25,height:25}}/>)
                  : (<Image source={require('../img/type2.png')} style={{width:25,height:25}}/>);
              }
              else if (route.name === '我的') {
                iconName = focused
                  ? (<Image source={require('../img/my1.png')} style={{width:25,height:25}}/>)
                  : (<Image source={require('../img/my2.png')} style={{width:25,height:25}}/>);
              }
              return iconName;
            }
          })}
          tabBarOptions={{
            activeTintColor: '#FF7744',
            style:{
              backgroundColor:'#fff',
            }
          }}>
          <Tab.Screen name="首页" component={Index} />
          <Tab.Screen name="类别" component={Type} />
          <Tab.Screen name="我的" component={My} />
        </Tab.Navigator>
      </NavigationContainer>
    )
  }
}
export default FoodNavigation
